JS 笔记

前言：

JS 笔记；

一、用法

1、JS 内部引用

    1. 嵌入式
        <script type="text/javascript">
            //  单行注释
            document.write('hello');
            
            /*  多行注释
                代码后面分号 ';' 可写可不写，都支持
                字符串可以用双引号 "" 和 单引号 ''
                JS 建议使用 ''，HTML 属性都是用 ""
            */
            alert('JS 代码');
        </script>
    
    2. 行间（内联式）不推荐
        <input type="button" value="按钮" onclick="alert('JS 代码')">

2、JS 外部文件引用
    <script src="myscript.js"></script>

注意：
javascript 作为一种脚本语言可以放在 html 页面中任何位置，但是浏览器解释 html 时是按先后顺序的，所以前面的 script 就先被执行。

二、变量

1、通过 var 声明（创建）变量
    var mychar;
    
2、声明多个变量，用逗号隔开
	var num1 = 123, num2 = 321, num3 = 444;
    
3、修改变量，变量要先声明再赋值
    mychar = 'hello';
    
4、命名规则:
    1. 变量必须使用字母、下划线(_)或者美元符($)开始。
    2. 然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
    3. 不能使用JavaScript关键词与JavaScript保留字。

注意：

在 JS 中区分大小写，如变量 mychar 与 myChar 是不一样的，表示是两个变量。

变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

三、变量类型

1、五种基本数据类型：
    1、number 数字类型
    2、string 字符串类型
    3、boolean 布尔类型 true 或 false
    4、undefined undefined 类型，变量声明未初始化，它的值就是 undefined
    5、null null 类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为 null，在页面上获取不到对象，返回的值就是 null
    
    // 1. 数字类型：不带引号的 0-9  
    // 特点：能够进行数学运算
		var num1 = 10
		var num2 = 20
		
	// 2. 字符串类型：只要带了引号的，都是字符串
	// 特点：1.原样输出；2.任何的数据类型跟字符串相加，都会变成字符串；3.字符串会相连
		var str1 = '10'
		var str2 = '20'
		
	// 3. 符号问题：* - / 可以把数据类型转为数字
	// 如果出现 NAN：代表这不是一个数字
		alert(str1 / 1 + num1)

2、一种复合类型：
    object

四、函数

如何定义一个函数呢？基本语法如下:

1、函数语法
    /*
        1. function 定义函数的关键字。
        2. "函数名" 你为函数取的名字。
        3. "函数代码" 替换为完成特定功能的代码。
    */
    function 函数名() {
         函数代码;
    }

2、函数使用
    <script type="text/javascript">
    
        // 1. 定义函数
		// 前端的函数：有多少个形参，就要传多少个实参
		function fnAlert(par1, par2){
			/* return返回值：
			    1. 把数据返回出去（没有地方打印或者没有地方接收数据的时候）
			    2. 阻止程序往下执行
			*/
			return par1 + par2;
			
			// 上面有 return 把程序给终止
			alert('123');
		}
		
		// 2. 调用函数
		alert(fnAlert('参数1', '参数2'));
		
    </script>
	
3、入口函数 window.onload
    作用：当整个页面加载完毕之后，再加载里面的代码
	// 如果 JS 在 body 上面写，带上入口函数
	// 如果 JS 在 body 下面写，不用带入口函数
	window.onload = function(){
		......
	}

五、判断语句（if…else）

1、语法
    if (条件一) {
        条件一成立时执行的代码
    } else if(条件二) {
        条件二成立时执行的代码
    } else {
        条件都不成立时执行的代码
    }
    
2、使用
    // =   一个等于代表赋值
    // ==  判断等于，可以用数字跟字符串进行判断
	// === 三等于，不单止值要相等，类型也要相等
	// !=  不等于
	
	if (80 == '80') {
		alert('== 成立');
	} else if (80 === '80') {
		alert('=== 成立');
	} else{
		alert('不成立')
	}

六、逻辑运算符

1、与(&&)、或(||)、非(！)

    1. &&  并且：一真一假，为假。全部都要真的，才会成立
    2. ||  或者：一真一假，为真。只要满足一个条件，就能成立
    3. !   否  ：反义词

七、预解析

预解析：能不能先调用，再定义

    <script type="text/javascript">
        // 1. 变量是没有预解析功能的
        // alert(num);
        // var num = 10;

	    // 2. 函数是有预解析的功能
		fnAlert();
		function fnAlert(){
			alert('1');
		}
	</script>

八、JS 设置 HTML 样式、属性、内容

1、设置 HTML 样式
    <script type="text/javascript">
		// document.getElementById('box')  选择器：JS 要通过 ID 去选择元素
		//.style   设置样式
		var oBox = document.getElementById('box')
		oBox.style.color = 'red'
		// JS 设置问题：遇到横杠去掉，并且把后面的首字母变成大写
		oBox.style.fontSize = '50px'
	</script>
		
2、设置 HTML 属性
    <script type="text/javascript">
		var oLink = document.getElementById('link')
		var oTxt = document.getElementById('txt')
		
		// 设置 HTML 属性：选择器.属性名 = '值'
		oLink.href = 'http://jovelin.cn'
		oLink.title = '我的主页'
		oTxt.value = 'input'
		
		// 设置 class 要写成 className
		oLink.className = 'red'
		
		// 获取 HTML 属性：选择器.属性名  可以获取该属性的值
		alert(oTxt.value)
	</script>
	
	注意：选择下拉框要给 select 写 id；下拉框要做判断，必须要给 option 加上 value

3、设置 HTML 内容
    <script type="text/javascript">
		var oBox = document.getElementById('box')
		
		// 设置 HTML 内容，会覆盖原有内容
            // oBox.innerHTML = '<a href="#">'+
            // '<span>JS</span>'+
            // '</a>'
		
		// += 就是在原有的基础添加内容
		oBox.innerHTML = oBox.innerHTML + '123'
		
		// 获取 HTML 内容
		alert(oBox.innerHTML)
	</script>

九、点击事件

事件三要素：事件源.事件类型 = function(){执行的命令}

    <script type="text/javascript">
		var oBtn = document.getElementById('btn')
		
		// onclick 点击事件
		oBtn.onclick = function(){
			// 按钮点击之后，要执行的命令
			alert('hello')
		}
	</script>

十、数组

1. 定义
    // 对象的实例创建
    var aList = new Array(1, 2, 3);
    
    // 直接量创建
    var aList2 = [1, 2, 3, 'jovelin'];
    
    // 多维数组
    var aList3 = [[1, 2], ['a', 'b'], [8, 9]]
    
2. indexOf() 返回数组中元素第一次出现的索引值
    如果没有找到该数据，会返回  -1

3. reverse() 将数组反转

4. splice() 在数组中增加或删除成员
    // 第一个参数：从第几个开始；
    // 第二个参数：删除多少个；
    // 后面的参数都是要添加的元素
	aList2.splice(2, 1) // 输出：12jovelin
	aList2.splice(2, 2, 4, 5, 6) // 输出：12456

5. push() 和 pop() 从数组最后增加成员或删除成员
    pop() 返回值是被删除的数据
    
6. aList[index] 用下标操作数组的某个数据

7. aList.length 获取数组的长度

8. join() 将数组成员通过一个分隔符合并成字符串
    var aList = [2018,8,2];
    aList.join('-'); // 输出 2018-8-2

十一、循环语句

循环的作用：
    1. 重复执行的代码；
    2. 遍历数据

1. 语法
    for(var i=0; i<len; i++){
        ......
    }
    
2. 数组去重

    var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
    
    var aList2 = [];
    
    for(var i=0; i<aList.length; i++) {
        if(aList.indexOf(aList[i]) == i) {
            aList2.push(aList[i]);
        }
    }

十二、调试程序的方法

1. alert(i)  
    alert 去查看大量数据，不方便

2. console.log(i)
    从控制台查看程序，适合查看大量数据使用的

3. document.title = i
    在网页标题查看，基本没用
    
4. 断点调试
    通过 chrome 浏览器调试工具的 sources 窗口，
    可以对外链的 js 文件进行断点调试

十三、变量作用域

1、全局变量
    在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
    
2、局部变量
    在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

    <script type="text/javascript">
        // 定义全局变量
        var a = 12;
        function myalert() {
            // 定义局部变量
            var b = 23;
            alert(a);
            // 修改全局变量
            a++;
            alert(b);
        }
        myalert(); // 弹出 12 和 23
        alert(a);  // 弹出 13    
        alert(b);  // 出错
        
        // 先修改全局变量，后又用 var 声明该变量问题
        var tv = '好电视'
        
        function wang(){
            // alert(tv)    // 优先调用局部变量
            tv = '坏电视'  // 这里，浏览器以为你改的是下面那个tv。而不是全局的那个
            var tv = '老王家的'   // 变量提升
            alert(tv)
		}
    </script>
    
注意：只要局部变量定义声明了 var，就不会修改同名全局变量的值

十四、封闭函数

作用 
    封闭函数可以创造一个独立的空间，
    在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，
    可以避免命名冲突，在页面上引入多个 js 文件时，
    用这种方式添加 js 文件比较安全

1. 语法
    (function(){
        alert('hello!');
    })()
    
2. 加上“;”、“~”和“!”等符号来定义匿名函数

    ;function(){
        window.onload = function(){
            alert('hello!');
        }
    }()
    
    ~function(){
        alert('hello!');
    }()
    
    !function(){
        alert('hello!');
    }()

十五、定时器

1、作用
    1. 定时调用函数
    2. 制作动画

2、定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

3、定时器使用
    <script type="text/javascript">
        // 定时器作用：多少毫秒之后，要执行什么程序
		var oBtn1 = document.getElementById('btn1')
		var oBtn2 = document.getElementById('btn2')
		var oBtn3 = document.getElementById('btn3')
		var oBtn4 = document.getElementById('btn4')
		
        // 关闭定时器要点：
		// 1. 在全局声明一个空的变量
		// 2. 把变量以修改的方式，赋值定时器
		
        var time1 = null
        var time2 = null
        
        oBtn1.onclick = function(){
            time1 = setTimeout(function(){
                ......
            }, 2000)
        }
        
        oBtn2.onclick = function(){
            time2 = setInterval(function(){
                ......
            }, 2000)
        }
        
        oBtn3.onclick = function(){
            clearTimeout(time1);
        }
        
        oBtn4.onclick = function(){
            clearInterval(time2);
        }
    </script>

十六、字符串处理方法

1、字符串合并操作：“ + ”

2、parseInt() 将数字字符串转化为整数
    - 有小数点取整数部分
    
3、parseFloat() 将数字字符串转化为小数

4、split() 把一个字符串分隔成字符串组成的数组
    - 括号中不写内容代表：把每一个字都转为数组
    - 假如有符号，那么就会以这个符号为分割符进行拆分

5、indexOf() 查找字符串是否含有某字符
    - 返回值：第一次出现的索引值

6、substring() 截取字符串
    - 用法： substring(start, end)
    -（不包括 end，左闭右开，从 0 开始）
    
7、字符串反转
    var str = 'asdfj12jlsdkf098';
    // 先把字符串转为数组，数组反转之后，在将数组转为字符串
    var str2 = str.split('').reverse().join('');